import React, {useEffect, useState} from 'react';
import {PageContainer} from "@ant-design/pro-layout";
import {Button, Alert} from 'antd'
import {PlusOutlined} from '@ant-design/icons'
import ProTable from '@ant-design/pro-table';
import {connect} from 'umi';

const status = [
    <Alert message="代办" type="info" showIcon/>,
    <Alert message="已完成" type="success" showIcon/>,
    <Alert message="已取消" type="error" showIcon/>,
]

const columns = [
    {
        title: "Id",
        dataIndex: "id",
    },
    {
        title: "标题",
        dataIndex: "title"
    },
    {
        title: "修改状态",
        dataIndex: "status",
        render: (_, record) => {
            console.log(record)
            return [
                status[record.status]
            ]
        }
    },
    {
        title: "修改状态",
        render: () => [
            <a>代办 </a>,
            <a>完成 </a>,
            <a>取消 </a>,
        ]
    }
]

// status:0代办 1完成 2取消
// const data = [
//     {id: 1, title: "TodoList列表", status: 0},
//     {id: 2, title: "TodoList添加", status: 1},
//     {id: 3, title: "TodoList编辑", status: 2},
//     {id: 4, title: "TodoList修改状态", status: 0},
// ]

const Person = (props) => {
    const {dispatch, todo: {todoList}} = props;

    useEffect(() => {
        dispatch({
            type: "todo/fetchTodoList",
            payload: null,
        });
    }, [])

    const [data, setTodoList] = useState([]);

    return (
        <PageContainer>
            <ProTable
                columns={columns}
                dataSource={todoList}
                rowKey="id"
                search={false}
                dateFormatter="string"
                headerTitle="待办事项列表"
                toolBarRender={() => [
                    <Button type="primary" key="primary">
                        <PlusOutlined/> 新建
                    </Button>
                ]}
            />
        </PageContainer>
    );
};

const mapStateToProps = (state, action) => {
    console.log(state, action)
    return {
        todo: state.todo,
    }
}

export default connect(mapStateToProps)(Person);